<script setup lang="ts">
const navItems = [
  { title: 'UI COMPONENT', count: '24' },
  { title: 'WEBGL DEMO', count: '08' },
  { title: 'UTILITIES', count: '12' },
]
</script>

<template>
  <div class="h-[calc(100vh-8rem)] flex flex-col items-center justify-center relative">
    <!-- Center Hero -->
    <div class="relative z-10 text-center space-y-6 max-w-4xl">
      <div
        class="inline-block px-4 py-1 border border-blue-500/30 rounded-full bg-blue-900/20 text-blue-300 text-xs tracking-[0.2em] uppercase mb-4 animate-pulse"
      >
        System Version 2.0.4
      </div>

      <!-- 修复背景渐变裁剪问题 -->
      <h1
        class="text-6xl md:text-8xl font-bold tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-white to-blue-400 drop-shadow-[0_0_30px_rgba(59,130,246,0.5)]"
      >
        SAURY DEMO
      </h1>

      <p class="text-lg md:text-xl text-blue-200/60 max-w-2xl mx-auto leading-relaxed font-light">
        Welcome to the frontier of frontend exploration. <br />
        A collection of Vue 3 experiments, architectural patterns, and UI concepts.
      </p>

      <!-- Action Buttons -->
      <div class="flex items-center justify-center gap-6 mt-12">
        <button
          class="group relative px-8 py-3 bg-blue-600 text-white font-bold tracking-widest uppercase clip-corner hover:bg-blue-500 transition-all hover:scale-105 active:scale-95 cursor-pointer"
        >
          <span class="relative z-10">Initialize</span>
          <div
            class="absolute inset-0 bg-blue-400 blur-lg opacity-50 group-hover:opacity-75 transition-opacity"
          />
        </button>

        <button
          class="px-8 py-3 border border-blue-500/30 text-blue-300 font-bold tracking-widest uppercase clip-corner hover:bg-blue-900/20 hover:border-blue-400 transition-all cursor-pointer"
        >
          Documentation
        </button>
      </div>
    </div>

    <!-- Bottom Status Bar -->
    <div class="absolute bottom-12 left-0 right-0 flex justify-center gap-12 px-8">
      <div v-for="item in navItems" :key="item.title" class="text-center group cursor-pointer">
        <div
          class="text-3xl font-bold text-white mb-1 group-hover:text-blue-400 transition-colors font-mono"
        >
          {{ item.count }}
        </div>
        <div
          class="text-[10px] tracking-[0.15em] text-blue-500/60 uppercase group-hover:text-blue-400/80"
        >
          {{ item.title }}
        </div>
      </div>
    </div>

    <!-- Decorative Circles -->
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] border border-blue-500/10 rounded-full animate-[spin_20s_linear_infinite]"
    />
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] border border-blue-500/20 rounded-full border-dashed animate-[spin_15s_linear_infinite_reverse]"
    />
  </div>
</template>

<style scoped>
.clip-corner {
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}
</style>
